<template>
	<div id="tmpl">
		<div id="tl">我是图片详情</div>
		<div id="desc">
			<div class="title">
				<h4>{{photoinfo.title}}</h4>
				<p>发表时间：{{photoinfo.add_time|datefmt('YYYY-MM-DD HH:mm:ss')}}　　浏览次数：{{photoinfo.click}}</p>
				<hr/>
			</div>
			<!--缩略图-->
			<div class="mui-content">
				<ul class="mui-table-view mui-grid-view mui-grid-9">
					<li  class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" v-for="(item,index) in list">
						<img class="preview-img"  :src="item.src" height="100" @click="$preview.open(index,list)">
					</li>
				</ul>
				<p v-html="photoinfo.content"></p>
			</div>
			
		</div>
		<div id="comment">
			<comment :id="id"></comment>
		</div>
	</div>
</template>
<script>
//导入评论组件
	import comment from '../subcom/comment.vue';
	import {Toast} from 'mint-ui';
	import common from '../../kits/common.js';
	export default{
		components:{
			comment
		},
		data(){
			return{
				id:0,
				photoinfo:'',
				list: [
				// {
		  //         src: 'https://placekitten.com/600/400',
		  //         w: 600,
		  //         h: 400
		  //       }, {
		  //         src: 'https://placekitten.com/1200/900',
		  //         w: 1200,
		  //         h: 900
		  //       }
		        ]//缩略图数据
			}
		},
		created(){
			this.id=this.$route.params.id;
			this.getinfo();
			this.getimgs();
		},
		methods:{
			getimgs(){
				var url=common.apidomain+'/api/getthumimages/'+this.id;
				this.$http.get(url).then(function(response){
					var data = response.body;
					if (data.status!=0) {
						Toast(data.message);
						return;
					}
					data.message.forEach(function(item){
						var img=document.createElement('img');
						img.src = item.src;
						item.h = img.height;
						item.w = img.width;
						// item.h=400;
						// item.w=400;
					})
					this.list=data.message;
				})
			},
			getinfo(){
				var url=common.apidomain+'/api/getimageInfo/'+this.id;
				this.$http.get(url).then(function(response){
					var data = response.body;
					if (data.status!=0) {
						Toast(data.message);
						return;
					}
					console.log(response.body);
					this.photoinfo=data.message[0];
				})
			}
		}
	}
</script>
<style scoped>
	#tl{
		width: 100%;
		height: 30px;
		color: #369;
		background-color: rgba(0,0,0,.2);
		text-align: center;
		font: 20px '微软雅黑';

	}
	#desc {
		padding: 10px;
	}
	#desc .title h4{
		color:#0094ff;		
	}
	#desc .title p{
		color: rgba(0,0,0,.2);
		margin-top: 10px;
	}
	hr{
		opacity: 0.4;
	}
	.mui-content,.mui-grid-view.mui-grid-9{
		background-color: #fff;
	}
	.mui-grid-view.mui-grid-9{
		border:none;
		border-left: none;
		border-bottom: none;
	}
	.mui-content img{
		width: 100px;
		height: 100px;
	}
	
</style>